import { Modal, Pagination, Table, Input } from "antd";
import { useCallback, useEffect, useState } from "react";
import { request } from "../../../Api/api";
import MyToolTip from "../../MyToolTip";

const SelectQuestion = ({
  open = false,
  onCancel = () => {},
  onOk = () => {},
}) => {
  const [questions, setQuestions] = useState([]);
  const [page, setPage] = useState({ page: 1, limit: 5 });
  const [where, setWhere] = useState({ key: "" });
  const [total, setTotal] = useState(0);
  const [selectedQuestions, setSelectedQuestions] = useState([]);
  const bind = useCallback(async () => {
    const res = await request(
      "/question/pagination",
      { ...page, ...where },
      "GET"
    );
    if (res.code >= 0) {
      setQuestions(res.data.data);
      setTotal(res.data.total);
    }
  }, [page, where]);
  useEffect(() => {
    async function fetchData() {
      await bind();
    }
    fetchData();
  }, [bind]);
  const columns = [
    {
      title: "题目",
      dataIndex: "content",
      key: "content",
      width: 200,
      ellipsis: true,
      render: (content) => {
        return (
          <MyToolTip placement={"topLeft"} title={content}>
            {content}
          </MyToolTip>
        );
      },
    },
    {
      title: "答案",
      dataIndex: "answer",
      key: "answer",
      width: 100,
      ellipsis: true,
      render: (answer) => {
        return (
          <MyToolTip placement={"topLeft"} title={answer}>
            {answer}
          </MyToolTip>
        );
      },
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      width: 50,
      ellipsis: true,
    },
  ];
  return (
    <Modal
      title="Select Question"
      open={open}
      cancelText="取消"
      onCancel={onCancel}
      okText="确定"
      onOk={() => {
        onOk(selectedQuestions);
      }}
    >
      <div>
        <Input
          style={{ margin: "auto" }}
          value={where.key}
          onChange={(e) => setWhere({ ...where, key: e.target.value })}
          placeholder="搜索"
        ></Input>
      </div>
      <Table
        rowKey={({ id }) => id}
        rowSelection={{
          selectedRowKeys: selectedQuestions.map((item) => item.id),
          onChange: (selectedRowKeys, selectedRows) => {
            // 当前数据列表的数据编号
            const questionIds = questions.map((item) => item.id);
            const deletedQuestions = selectedQuestions.filter(
              (item) =>
                !(
                  questionIds.includes(item.id) &&
                  !selectedRowKeys.includes(item.id)
                )
            );
            const addedQuestions = selectedRows.filter(
              (item) => !selectedQuestions.map((item) => item.id).includes(item)
            );
            const newSelectedQuestions =
              deletedQuestions.concat(addedQuestions);
            setSelectedQuestions(newSelectedQuestions);
          },
        }}
        dataSource={questions}
        columns={columns}
        pagination={false}
      />
      <Pagination
        current={page.page}
        pageSize={page.limit}
        onChange={(page, pageSize) => {
          setPage({ page, limit: pageSize });
        }}
        total={total}
      ></Pagination>
    </Modal>
  );
};
export default SelectQuestion;
